<template>
	<div class="all">
		<div class="left">
			<left></left>
		</div>
		<div class="right">
			<div class="top">
				<top></top>
			</div>
			<div class="content">
				<div class="flex">
					<el-button type="warning" @click="xiugai('',1)">新增按月定额套餐</el-button>
					<el-button type="warning" @click="xiugai('',2)">新增包年套餐</el-button>
				</div>
				<div class="table">
					<el-table :data="tableData" border style="width: 100%" :loading="loading">
						<el-table-column label="ID">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="套餐名称">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.title }}</span>
							</template>
						</el-table-column>
						<el-table-column label="价格(元)">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.price }}</span>
							</template>
						</el-table-column>
						<el-table-column label="包体流量(GB)">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.flow }}</span>
							</template>
						</el-table-column>
						<el-table-column label="虚值百分比(%)">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.limitNum }}</span>
							</template>
						</el-table-column>
						<el-table-column label="排序">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.sortNum }}</span>
							</template>
						</el-table-column>
						<el-table-column label="创建时间">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.createTime }}</span>
							</template>
						</el-table-column>
						
						<el-table-column label="操作" width="280px" align="center">
							<template slot-scope="scope">
								<el-button type="text" @click="go('/taocan/taocan_fenxiaoshang',scope.row.id)">关联的分销商
								</el-button>
								<el-button type="text" @click="shanchu(scope.row.id)">删除套餐</el-button>
								<el-button type="text" @click="xiugai(scope.row,'')">修改套餐</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next" :current-page="page"
					 @current-change="fanye" :page-size="page_size" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<el-dialog :title="logtitle" :visible.sync="log" :close-on-click-modal="false" width="600px">
			<div class="flex">
				<div class="f1">套餐类型:</div>
				<div class="f2">
					<el-select v-model="taocan.type" placeholder="请选择套餐类型">
						<el-option v-for="item in alltaocan" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="flex">
				<div class="f1">套餐名称:</div>
				<div class="f2">
					<el-input v-model="taocan.title" style="width: 400px;" placeholder="套餐名称"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">副标题:</div>
				<div class="f2">
					<el-input v-model="taocan.subTitle" style="width: 400px;" placeholder="副标题"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">文字说明:</div>
				<div class="f2">
					<el-input
						style="width: 400px;"
						v-model="taocan.info"
						type="textarea"
						placeholder="内容不超过36个字"
						maxlength="36"
						show-word-limit
						@input="timeEffectInput"
						/>
				</div>
			</div>
			<div class="flex">
				<div class="f1">虚值百分比:</div>
				<div class="f2">
					<el-input v-model="taocan.limitNum" style="width: 400px;" placeholder="虚值百分比,输入整数,输入90即为90%"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">价格:</div>
				<div class="f2">
					<el-input v-model="taocan.price" style="width: 400px;" placeholder="价格">
						<template slot="append">元</template>
					</el-input>
				</div>
			</div>
			<!-- <div class="flex">
				<div class="f1">预存费用:</div>
				<div class="f2">
					<el-input v-model="taocan.firstPrice" style="width: 400px;" placeholder="预存费用">
						<template slot="append">元</template>
					</el-input>
				</div>
			</div> -->
			<div class="flex" v-if='opentype==2'>
				<div class="f1">套餐时间:</div>
				<div class="f2">
					<el-select style="width: 400px;" v-model="taocan.monthNum" placeholder="请选择">
						<el-option
						label="三个月"
						:value=3>
						</el-option>
						<el-option
						label="半年"
						:value=6>
						</el-option>
						<el-option
						label="一年"
						:value=12>
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="flex">
				<div class="f1">包体流量:</div>
				<div class="f2">
					<el-input v-model="taocan.flow" style="width: 400px;" placeholder="包体流量">
						<template slot="append">GB</template>
					</el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">排序:</div>
				<div class="f2">
					<el-input v-model="taocan.sortNum" style="width: 400px;" placeholder="排序"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">排序:</div>
				<div class="f2">
					<el-checkbox style="margin-top: 10px;" v-model="taocan.isHot" :checked="taocan.isHot===1? true:false" :true-label="1"
					:false-label="0">
					热卖
				</el-checkbox>
				</div>
			</div>
			
			<span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取 消</el-button>
				<el-button type="primary" @click="tianjia()">确 定</el-button>
			</span>
		</el-dialog>
		
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import bus from '@/assets/bus.js'
	export default {
		name: 'taocan',
		components: {
			left,
			top
		},
		data() {
			return {
				taocan: {
					id: "",
					type: "",
					title: "",
					flow: "",
					price: "",
					limitNum:"",
					sortNum:"",
					firstPrice:0,
					subTitle:'',
					info:'',
					isHot:0,
					monthNum:1
				},
				
				changecon: {},
				log: false,
				page: 1,
				page_size: 20,
				total: 0,
				loading: true,
				tableData: "",
				alltaocan: [{
						title: "基础包",
						id: 1
					},
					{
						title: "加油包",
						id: 2
					}
				],
				tjtype:null,//1添加2修改
				logtitle:'',//弹窗标题
				opentype:null,//打开弹窗的种类1月付2年付
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		created() {
			this.gettaocan()

		},
		methods: {
			go: function(url, id) {
				this.$router.push({
					path: url,
					query: {
						id: id
					}
				})
			},
			//获取全部套餐
			gettaocan: function() {
				this.axios.get(this.url + `/work/packages/list?pageNo=${this.page}&pageSize=${this.page_size}`)
					.then(response => {
						if (response.data.success == true) {
							this.tableData = response.data.result.records
							this.total = response.data.result.total
							this.loading = false
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.page = page
				this.gettaocan()
			},
			tianjia: function() {
				let url
				var type = this.tjtype
				if (this.taocan.type == '' || this.taocan.title == '') {
					this.$message.error('必须填写套餐类型和套餐名称');
					return false
				}
				if(this.opentype==2){
					//必须选择时间
					if(this.taocan.monthNum==null){
						this.$message.error('必须选择套餐时间');
						return false
					}
				}
				if (type == 1) {
					var typeurl = '/work/packages/add'
				}
				if (type == 2) {
					var typeurl = '/work/packages/edit'
				}
				url = this.url +
						`${typeurl}?id=${this.taocan.id}&flow=${this.taocan.flow}&price=${this.taocan.price}&title=${this.taocan.title}&type=${this.taocan.type}&limitNum=${this.taocan.limitNum}&sortNum=${this.taocan.sortNum}&firstPrice=${this.taocan.firstPrice}&subTitle=${this.taocan.subTitle}&info=${this.taocan.info}&isHot=${this.taocan.isHot}&monthNum=${this.taocan.monthNum}`
				this.axios.post(url)
					.then(response => {
						if (response.data.success == true) {
							this.loading = true
							this.gettaocan()
							
								this.log = false
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			xiugai: function(item,title) {
				
				if(item){
					//修改
					this.tjtype = 2
					this.taocan = {
						id: item.id,
						type: item.type,
						title: item.title,
						flow: item.flow,
						price: item.price,
						limitNum:item.limitNum,
						sortNum:item.sortNum,
						firstPrice:item.firstPrice,
						subTitle:item.subTitle,
						info:item.info,
						isHot:item.isHot,
						monthNum:item.monthNum
					}
					if(item.monthNum!=1){
						this.logtitle = '修改包年套餐'
						this.opentype = 2
					}else{
						this.logtitle = '修改按月定额套餐'
						this.opentype = 1
					}
				}else{
					//新建
					this.tjtype = 1
					this.taocan = {
						id:'',
						type: '',
						title: '',
						flow: '',
						price: '',
						limitNum:'',
						sortNum:'',
						firstPrice:0,
						subTitle:'',
						info:'',
						isHot:0,
						monthNum:1
					}
					if(title==1){
						this.logtitle = '新增按月定额套餐'
						this.opentype = 1
					}else if(title==2){
						this.logtitle = '新增包年套餐'
						this.opentype = 2
						this.taocan.monthNum = null
					}
				}
				
				this.log = true
			},
			shanchu: function(id) {
				this.$confirm('是否真的删除此套餐?', '确认提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.post(this.url + `/work/packages/delete?id=${id}`)
						.then(response => {
							if (response.data.success == true) {

								this.loading = true
								this.gettaocan()
								this.$message.error("已删除套餐");
							} else {
								this.$message.error(response.data.message);
							}
						})
				})

			},
			timeEffectInput() {
				const length = this.form.sxyx.length
				if (length >= 100) {
					this.$el.getElementsByClassName('el-input__count')[1].style = 'color:red !important'
					this.form.sxyx = this.form.sxyx.substr(0, 100)
				} else {
					this.$el.getElementsByClassName('el-input__count')[1].style = 'color:#000 !important'
				}
			}
		},

	}
</script>

<style scoped lang="less">
	.all {
		display: flex;
		height: 100vh;

		.left {
			width: 200px;
			height: 100%;
			background: #414652;
			box-shadow: 0 2px 10px #2D3038;
		}

		.right {
			width: calc(100% - 180px);
			height: 100%;
			overflow: auto;

			.content {
				padding: 20px;

				.table {
					margin-top: 20px;
				}
			}
		}
	}
</style>
